<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Card 卡片</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 480px;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button {
  padding: 0;
  min-height: auto;
}
.image {
  width: 100%;
  display: block;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">卡片包含标题，内容以及操作区域。</p>
	<p class="desc">Card 组件由 header 和 body 组成。 header 是可选的，其内容取决于一个具名的 slot。</p>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>Card name </span>
				<el-button class="button" >Operation button</el-button>
			</div>
		</template>
		<div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
	</el-card>
	
	<el-divider content-position="left">简单卡片</el-divider><!-- =============================================================== -->
	<p class="desc">卡片可以只有内容区域。</p>
	<el-card class="box-card">
		<div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
	</el-card>
	
	<el-divider content-position="left">有图片内容的卡片</el-divider><!-- =============================================================== -->
	<p class="desc">可配置定义更丰富的内容展示。</p>
	<p class="desc">配置 body-style 属性来自定义 body 部分的样式。 在这个例子中我们还使用了 el-col 组件来布局。</p>
	<el-row>
		<el-col v-for="(o, index) in 2" :key="o" :span="4" :offset="index > 0 ? 1 : 0">
			<el-card :body-style="{ padding: '0px' }">
				<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" />
				<div style="padding: 14px">
					<span>Yummy hamburger</span>
					<div class="bottom">
						<time class="time">{{ currentDate }}</time>
						<el-button class="button">Operating</el-button>
					</div>
				</div>
			</el-card>
		</el-col>
	</el-row>
	
	<el-divider content-position="left">带有阴影效果的卡片</el-divider><!-- =============================================================== -->
	<p class="desc">你可以定义什么时候展示卡片的阴影效果。</p>
	<p class="desc">通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是：always、hover 或 never。</p>
	<el-row :gutter="8">
		<el-col :span="4">
			<el-card shadow="always"> Always </el-card>
		</el-col>
		<el-col :span="4">
			<el-card shadow="hover"> Hover </el-card>
		</el-col>
		<el-col :span="4">
			<el-card shadow="never"> Never </el-card>
		</el-col>
	</el-row>
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			currentDate: new Date(),
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>